<template>
	<view class="start-index">
		<!-- <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view> -->
		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Moment ref="moment"></Moment>
			</scroll-view>
		</view> -->
		<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}"> -->
		<view>
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Work ref="work"></Work>
			</scroll-view>
		</view>
		<!-- <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top :scroll-top="pageScrollTop[3]"
				@scroll="tabbarPageScroll" @scrolltolower="tabbarPageScrollLower">
				<Partner ref="partner" @key-select="contactsKeysSelectEvent"></Partner>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Mine ref="mine"></Mine>
			</scroll-view>
		</view> -->

		<!-- <tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#3668FC" inactiveColor="#C5CAD5"
			activeIconColor="#3668FC" inactiveIconColor="#C5CAD5" :animation="true" :safeAreaInsetBottom="true"
			@change="switchTabbar"></tn-tabbar> -->
	</view>
</template>

<script>
	import Home from './home/home.vue'
	import Moment from './moment/moment.vue'
	import Work from './work/work.vue'
	import Partner from './partner/partner.vue'
	import Mine from './mine/mine.vue'

	export default {
		components: {
			Home,
			Moment,
			Work,
			Partner,
			Mine
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '首页',
						// activeIcon: '/static/tabbar/tn-tabbar0-curnew.png',
						// inactiveIcon: '/static/tabbar/tn-tabbar0.png'
						activeIcon: 'company-fill',
						inactiveIcon: 'company-fill',
						// count: '15',
						iconSize: 50
					},
					{
						title: '时光',
						/* activeIcon: '/static/tabbar/tn-tabbar1-curnew.png',
						inactiveIcon: '/static/tabbar/tn-tabbar1.png' */
						activeIcon: 'discover-fill',
						inactiveIcon: 'discover-fill',
						count: '3',
						iconSize: 50
					},
					{
						title: '工作台',
						/* activeIcon: '/static/tabbar/tn-tabbar1-curnew.png',
						inactiveIcon: '/static/tabbar/tn-tabbar1.png' */
						activeIcon: 'menu-circle-fill',
						inactiveIcon: 'menu-circle-fill',
						iconSize: 50
					},
					// 这个是中间突起的tabbar，因为要商务，所以亿润不用突起的tabbar，当然，如果你家boss喜欢，可以用，预留在这里了
					// {
					//   title: '工作台',
					//   activeIcon: 'menu-match-fill',
					//   inactiveIcon: 'rocket',
					//   activeIconColor: '#FFFFFF',
					//   inactiveIconColor: '#FFFFFF',
					//   iconSize: 50,
					//   out: true
					// },
					{
						title: '通讯录',
						/* activeIcon: '/static/tabbar/tn-tabbar2-curnew.png',
						inactiveIcon: '/static/tabbar/tn-tabbar2.png' */
						activeIcon: 'address-fill',
						inactiveIcon: 'address-fill',
						iconSize: 50
					},
					{
						title: '我的',
						/* activeIcon: '/static/tabbar/tn-tabbar3-curnew.png',
						inactiveIcon: '/static/tabbar/tn-tabbar3.png' */
						activeIcon: 'my-job-fill',
						inactiveIcon: 'my-job-fill',
						iconSize: 50
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 2,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],

				// 保存每个子页面scrollTop的值
				pageScrollTop: [0, 0, 0, 0, 0]

			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)

		},
		onShow() {
			this.$store.dispatch('GetInfo')
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},


			// 瀑布流导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 子页面滚动事件
			tabbarPageScroll(e) {
				const scrollTop = e.detail.scrollTop
				this.pageScrollTop[this.currentIndex] = scrollTop
				if (this.currentIndex === 3) {
					this.$refs?.partner?._updateScrollTopValue(scrollTop)
				}
			},

			// 通讯录点击索引事件
			contactsKeysSelectEvent(scrollTop) {
				// this.pageScrollTop[3] = scrollTop
				this.$set(this.pageScrollTop, 3, scrollTop - 125)
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				wx.vibrateShort();
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>